<template>
  <div class="search" ref="search">

    <div class="search-box">

      <div class="a-search" @click="$router.push(`/property/${letGo}`)">
        搜索
        <div class="triangle" />
      </div>
      <!-- 做模糊搜索房产列表将替换成下面方式进行传参 -->
      <!-- $router.push(`/property/${letGo}`) -->
      <el-input class="input-search" @keyup.enter.native="$router.push(`/property/${letGo}`)" v-model="letGo">
        <el-button slot="append" icon="el-icon-search" @click="$router.push(`/property/${letGo}`)"/>
      </el-input>
    </div>
    <spwiper :searchHeight="searchHeight"/>
  </div>
</template>

<script>
import spwiper from './components/swiper.vue'
export default {
  name: 'DashBoard',
  components: { spwiper },
  data () {
    return {
      letGo: '',
      searchHeight: 0
    }
  },
  mounted () {
    this.searchHeight = this.$refs.search.offsetHeight + 'px'
  }
}
</script>

<style lang="scss" scoped>

.search{
  height: 100%;
  position: relative;
  .search-box{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    transform: translate(-50%,-50%);
    z-index: 10;
    .a-search{
          width: 50px;
          height: 40px;
          line-height: 40px;
          color: black;
          background-color: #ededed;
          font-size: 14px;
          position: relative;
        .triangle{
              position: absolute;
              top: 0;
              left: 49.8px;
              width: 0;
            height: 0;
            border: 20px solid transparent;
            /* border-width: 40px 20px 0 0; */
            border-left-color: #ededed;
            border-bottom-color: #ededed;
      }
      }
  }
}

::v-deep .el-input__inner{
  border-top-left-radius:0
}

</style>
